<template>
    <goods-list-content>
        <template v-slot:item>
            <goods-list-item v-for="(item,index) in goods"
                             :good-item="item">
                <template v-slot:item-pic>
                    <img class="good-item-pic"
                         :src=item.show.img>
                </template>
                <template v-slot:item-info>
                    <div class="good-item-info">
                        <p class="good-item-title"> {{item.title}}</p>
                        <p><span class="good-item-price">
                                {{item.orgPrice}}
                            </span>
                            <span class="good-item-collect">
                                {{item.cfav}}
                            </span>
                        </p>
                    </div>
                </template>
            </goods-list-item>
        </template>
    </goods-list-content>
</template>
<script>
import GoodsListContent from './GoodsListContent';
import GoodsListItem from './GoodsListItem';

export default {
    name: "GoodsList",
    components: {
        GoodsListContent,
        GoodsListItem,
    },
    props: {
        goods: {
            type: Array,
            default: function () {
                return [];
            }
        }
    },
}
</script>
<style scoped>
.good-item-pic {
    width: 100%;
    border-radius: 5px;
}

.good-item-info {
    font-size: 12px;
    text-align: center;
    padding-top: 5px;
}
.good-item-title {
    padding: 2px;
    overflow: hidden; /*超出部分隐藏*/
    white-space: nowrap; /*不换行*/
    text-overflow: ellipsis; /*超出部分省略号显示*/
}
.good-item-collect {
    position: relative;
    margin-left: 20px;
}
.good-item-price {
    color: var(--color-high-text);
}
.good-item-collect::before {
    content: "";
    position: absolute;
    left: -15px;
    top: -1px;
    width: 14px;
    height: 14px;
    background: url("../../../assets/img/common/collect.svg") 0 0/14px 14px;
}
</style>